<template lang="html">
    <div class="container" >
      <div class="card"  v-for="(item,index) in recommendseeData">
            <div class="poster">
                <img :src="item.url" alt="item.title">
            </div>
            <div class="info">
                <div class="name">{{ item.title }}</div>
            </div>
      </div>
    </div>

</template>

<script>
export default {
  name:"recommendsee",
  data(){
    return{
      recommendseeData:[

      ]
    }
  },
  props:{
    dataUrl:{
      type:String,
      default:""
    }
  },
  components:{

  },
  created(){
      const recommendSeeUrl="http://localhost:8080/static/"+this.dataUrl
      // const recommendSeeUrl=this.HOST+"/v1/restserver/ting?method=baidu.ting.song.getRecommandSongList&song_id=877578&num=5"
      this.$axios.get(recommendSeeUrl)
      .then(res=>{
          // console.log(res.data);
          this.recommendseeData=res.data.recommendRadioData;
      })
      .catch((error) => {
        console.log(error);
      })
  }

}
</script>

<style scoped>
.container{
  overflow: hidden;
  /* padding-top:.35rem; */
  background-color: #fff;
}
.container .card{
  width: 33.3%;
  float: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 .05rem .2rem;
}
.card .poster img {
    width: 2.38rem;
    height: 2.38rem;
}
.card .info {
    width: 2.38rem;
}
.card .info .name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    padding: .12rem 0 0 .1rem;
}
</style>
